import 'package:animation/components/appbar_base.dart';
import 'package:animation/components/images/image_load.dart';
import 'package:animation/model/play_video_base.dart';
import 'package:animation/pages/other/videos/video_play.dart';
import 'package:animation/tools/route_animation.dart';
import 'package:flutter/material.dart';

class CyapiPage extends StatefulWidget {
  final String title;
  final String cover;
  final String desc;
  final GlobalKey herokey;
  final List<PlayVideoBase> videoList;
  const CyapiPage({
    super.key,
    required this.title,
    required this.cover,
    required this.desc,
    required this.herokey,
    required this.videoList,
  });

  @override
  State<CyapiPage> createState() => _CyapiPageState();
}

class _CyapiPageState extends State<CyapiPage> {
  List<PlayVideoBase> videoList = [];

  @override
  void initState() {
    super.initState();
    videoList = widget.videoList;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppbarBase(title: widget.title),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            SizedBox(
              height: 200,
              child: Row(
                spacing: 10,
                children: [
                  ClipRRect(
                    borderRadius: BorderRadius.circular(5),
                    child: Hero(
                      tag: widget.herokey,
                      child: SizedBox(
                        // 宽度为屏幕宽度
                        width: 150,
                        height: 200,
                        child: ImageLoad(imageUrl: widget.cover),
                      ),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      height: 200,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(5),
                          color: Theme.of(context).colorScheme.primaryContainer,
                          boxShadow: [
                            BoxShadow(
                              color: Theme.of(context).colorScheme.shadow,
                              offset: Offset(1, 1),
                              blurRadius: 1,
                            ),
                          ]),
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: ListView(
                          children: [
                            Text(widget.desc),
                          ],
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                IconButton(
                    onPressed: () {
                      setState(() {
                        // 数组倒序
                        videoList = widget.videoList.reversed.toList();
                      });
                    },
                    icon: Icon(Icons.import_export)),
                IconButton(onPressed: () {}, icon: Icon(Icons.favorite_border)),
              ],
            ),
            Expanded(
                child: GridView.builder(
                    itemCount: videoList.length,
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3,
                      crossAxisSpacing: 8,
                      mainAxisSpacing: 8,
                      childAspectRatio: 3,
                    ),
                    itemBuilder: (context, index) {
                      return Material(
                        color: Theme.of(context).colorScheme.primaryContainer,
                        borderRadius: BorderRadius.circular(5),
                        shadowColor: Theme.of(context).colorScheme.shadow,
                        clipBehavior: Clip.antiAlias,
                        elevation: 2,
                        child: InkWell(
                          onTap: () {
                            RouteAnimation().animateRoute(
                              context,
                              VideoPlay(
                                videoList: videoList,
                                activeIndex: index,
                                title: widget.title,
                              ),
                            );
                          },
                          child: Center(
                            child: Text(
                              videoList[index].title,
                            ),
                          ),
                        ),
                      );
                    })),
          ],
        ),
      ),
    );
  }
}
